<template>
  <div>
    <div>
      <!-- <van-nav-bar title="选择代申请人员" left-text="返回" left-arrow @click-left="onClickLeft" /> -->
    </div>
    <!-- 优惠券单元格 -->
    <!-- <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" /> -->
    <!-- 优惠券列表 -->
    <!-- <van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;"> -->
    <!-- <van-coupon-list
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @change="onChange"
      @exchange="onExchange"
    /> -->
    <!-- </van-popup> -->
    <div>
      <div class="van-coupon" v-for="(item,index) in coupons" :key="index">
        <div class="van-coupon__content">
          <div class="van-coupon__head">
            <h2 class="van-coupon__amount">
              {{item.userName}}
              <span></span>
            </h2>
            <p class="van-coupon__condition">{{item.userName}}</p>
          </div>
          <div class="van-coupon__body">
            <p class="van-coupon__name">123456</p>
            <p class="van-coupon__valid">1970.01.02 - 1970.01.02</p>
            <div
              role="checkbox"
              tabindex="0"
              aria-checked="true"
              class="van-checkbox van-coupon__corner"
              size="18"
            >
              <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
                <i
                  class="van-icon van-icon-success"
                  style="border-color: rgb(238, 10, 36); background-color: rgb(238, 10, 36);"
                >
                  <!---->
                </i>
              </div>
            </div>
          </div>
        </div>
        <p class="van-coupon__description">666666</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chosenCoupon: -1,
      // coupons: [{
      //     available: 1,
      //     condition: '无使用门槛\n最多优惠12元',
      //     reason: '',
      //     value: 150,
      //     name: '优惠券名称',
      //     startAt: 1489104000,
      //     endAt: 1514592000,
      //     valueDesc: '姓名',
      //     unitDesc: '元',
      // }],
      coupons: []
      // disabledCoupons: [coupon],
    };
  },
  created() {
    this.cx();
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: "wdqxj"
      });
    },
    onChange(index, e) {
      this.showList = false;
      this.chosenCoupon = index;
      console.log(index, e, 666666666666666666666);
      alert(this.chosenCoupon);
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    zhuanfunction(data) {
      let ret = "";
      for (let it in data) {
        ret +=
          encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
      }
      return ret;
    },
    cx() {
      var data = {
        userName: ""
      };
      const that = this;
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        method: "post",
        url: "user/queryUserListNoLimitPhone",
        data: this.zhuanfunction(data)
      }).then(response => {
        //这里使用了ES6的语法
        console.log(response); //请求成功返回的数据
        // this.coupons=
        let arr = response.data.data;
        console.log(typeof arr, arr);
        arr.forEach(item => {
          const obj = {
            available: item.sex == "0" ? "女" : "男",
            condition: item.sex == "0" ? "女" : "男",
            reason: item.mobile,
            value: item.mobile,
            name: item.mobile,
            startAt: item.mobile,
            endAt: item.mobile,
            valueDesc: item.userName,
            unitDesc: "",
            description: "666666"
          };
          this.coupons.push(obj);
        });
      });
    }
  }
};
</script>

<style>
</style>
